<template>
	<div class="pagination-container" :style="{'background':config.config.property.bgColor}">
		<div class="header">
			<img src="./images/title.png" :style="{ 'width': '100%' }" />
			<div class="header-right">
				<div class="card-tab" :class="{ active: currentTab === 1 }" @click="change(1)">带班</div>
				<div class="card-tab" :class="{ active: currentTab === 2 }" @click="change(2)">值班</div>
			</div>
		</div>
		<div class="content" v-if="showVisible">
			<div class="card" v-for="(item, index) in paginatedItems" :key="index">
				<div class="item-1" :style="{'color':config.config.property.nameColor,'fontSize':config.config.property.nameFontSize+'px'}">{{ item.name }}</div>
				<div class="item-2" :style="{'color':config.config.property.titleTextColor,'fontSize':config.config.property.titleTextSize+'px'}">{{ item.title }}</div>
			</div>
		</div>
		<div class="pagination">
			<div class="left" @click="pre"></div>
			<div class="right" @click="next"></div>
		</div>
	</div>
</template>
<script>
	import chartBase from '@/mixin/chart-base.js';
	import emitComponentBase from '@/mixin/emit-component-base.js';
	import dataModel from '@/models/panel-config-data.js';
	import {
		checkNegative
	} from '@/utils/util';
	import {
		mapState
	} from 'vuex';
	import config from './config/config';
	export default {
		name: 'OnDuty',
		components: {

		},
		mixins: [chartBase, emitComponentBase],
		props: ['pareentId', 'widgetId', 'widgetInstanceId', 'widgetName', 'identifier', 'layout', 'w', 'h', 'Item'],
		data() {
			return {
				currentTab: 1, // 当前选中的标签页
				showVisible: true, // 控制显示或隐藏
				// paginatedItems: [], // 当前分页显示的数据项
				apiResults: [],
				itemsPerPage: 6, // 每页显示的项数
				isLoading: false, // 控制加载状态
				currentPage: 1, // 当前页码
				// totalPages: 0, // 总页数
				items: [{
						title: '15201回风槽',
						name: '张三1',
						type: 1
					},
					{
						title: '15201回风槽',
						name: '张三2',
						type: 1
					},
					{
						title: '15201回风槽',
						name: '张三3',
						type: 1
					},
					{
						title: '15201回风槽',
						name: '张三4',
						type: 1
					},
					{
						title: '15201回风槽',
						name: '张三5',
						type: 2
					},
					{
						title: '15201回风槽',
						name: '张三6',
						type: 1
					},
					{
						title: '15201回风槽',
						name: '张三7',
						type: 2
					},
					{
						title: '15201回风槽',
						name: '张三8',
						type: 1
					},
					{
						title: '15201回风槽',
						name: '张三9',
						type: 2
					},
					{
						title: '15201回风槽',
						name: '张三10',
						type: 1
					},
					{
						title: '15201回风槽',
						name: '张三11',
						type: 2
					},
					{
						title: '15201回风槽',
						name: '张三12',
						type: 1
					},
					{
						title: '15201回风槽',
						name: '张三13',
						type: 2
					},
					{
						title: '15201回风槽',
						name: '张三14',
						type: 2
					}
				]
			};
		},
		computed: {
			...mapState({}),
			totalPages() {
				return Math.ceil(this.items.length / this.itemsPerPage)
			},
			paginatedItems() {
				const arr = (this.apiResults?.length ? this.apiResults : this.items).filter((item) => item.type == 1)
				const start = (this.currentPage - 1) * this.itemsPerPage
				return this.apiResults.slice(start, start + this.itemsPerPage)
			},
		},
		watch: {

		},
		created() {
			this.orgConfig = config;
			this.config = JSON.parse(JSON.stringify(this.orgConfig));
			this.chartId = `${this.widgetInstanceId}_01`;

		},
		mounted() {
			if (window.isLocalEnv) {
				this.loadWidget();
			}
		},
		methods: {
			goToPage(page) {
				this.currentPage = page
			},
			// 初始加载时 以及 编排面更改配置时 触发
			loadWidget(pageStatus) {
				this.pageStatus = pageStatus;
				this.updateConfigProperty();
				this.updateConfigData();
				if (window.isLocalEnv || this.emitComponentStatus) {
					this.updateParams(pageStatus);
					if (!this.isRealTime) {
						this.debounceGetData();
					}
				}
				this.afterLoadWidget();
				this.checkNegative(this.apiResult);
			},

			// 接收xvue发来的实时数据
			handleRealTimeCommunication(realTimeData) {
				if (this.config.config.property.isDebounce && this.isStopRealData) {
					return;
				}

				const result = this.getResult(realTimeData);
				if (this.isNoData || this.autoRefreshIsSameRes(result)) {
					this.isLoading = false;
					return;
				}
				const {
					data,
					property
				} = this.config.config;

				// api请求，拿到数据
				if (data.dataSourceType !== 'xMinerRedisRealTime') {
					this.getCorrectParams(this.params, data.dataSourceType); // 参数存入xvue，导出数据时使用
				}
				// this.apiResult = result;
				// this.lastParams = null;
				// this.sendDataToConfig(result);
				// const convertedData = convertData(result, property);
				// if (convertedData === -1) {
				//   this.$message.error(this.$demoi18n('view.dataSourceTypeErr'));
				//   this.setDataException();
				//   return;
				// }
				// this.generateChart(convertedData);
				// this.isLoading = false;
			},
			acceptEvtMsg(paramters, key, obj) {
				this.checkUpdateParams(obj);
			},
			checkUpdateParams(obj) {
				// 检查下是否和本组件有关
				const _obj = obj || {};
				let oo = {}
				let flag = false;
				for (const key in _obj) {
					if (key.indexOf(EMIT_PARAMS_OBJ) > -1) {
						const o = _obj[key];
						if (o.eventKey) {
							const event = this.config.events.find(e => e.type === 'in' && e.key === o.eventKey);
							if (event) {
								flag = true;
								oo = o
							}
							break;
						}
					}
				}
				if (flag) {
					// 和本组件有关再执行组件接收到事件后的相关操作
					console.log('_obj', _obj)
					console.log('oo', oo)

					this.isNoData = false;
					this.isLoading = true;
					this.autoRefresh();
					const alarm_id = oo?.parameters[oo?.keys[0]]
					let param = {
						code: 'alarm_id',
						value: alarm_id
					}
					let paramOo = [param]

					// api请求，拿到数据
					const {
						data
					} = this.config.config
					this.isLoading = true
					const method = `getChartData${data.dataSourceType}`;
					const trueParams = this.getCorrectParams(this.params, data.dataSourceType);
					trueParams = {
						...trueParams,
						params: paramOo,
					};

					dataModel[method](trueParams, data)
						.then(result => {
							this.apiResults = resul
							this.result = resul[0]
							console.log('result.value1', result.value)
							this.apiResults.forEach((it) => {
								it.downtime1 = Math.floor(it.time / 60)
								it.downtime2 = it.time % 60
							})

							this.showVisible = true
						})
						.catch(err => {
							this.handleChartDataError(err);
						})
						.finally(() => {
							this.isLoading = false;
						});
				}
			},
			getChartData() {
				const {
					data,
					property
				} = this.config.config;

				// 如果dataSourceType为静态数据,把数据放到Vuex，发出事件，然后退出
				if (data.dataSourceType === 'staticData') {
					this.apiResults = this.items
					this.showVisible = true
					// 重置数据异常状态
					this.resetAbnormalType();
					return;
				}

				// api请求，拿到数据
				if (data.dataSourceType) {
					this.isNoData = false;
					this.isLoading = true;
					this.autoRefresh();
					const method = `getChartData${data.dataSourceType}`;
					const params = this.getCorrectParams(this.params, data.dataSourceType);
					dataModel[method](params, data)
						.then(result => {
							this.apiResults = result
							this.showVisible = true
							// 重置数据异常状态
							this.resetAbnormalType();
							this.reportIfFieldsError(this.getParams()?.propertyMapping, result);
							if (this.autoRefreshIsSameRes(result)) {
								return;
							}

						})
						.catch(err => {
							this.handleChartDataError(err);
						})
						.finally(() => {
							this.isLoading = false;
						});
				} else {
					// 如果在用户面，则给提示
					if (this.$route.name === 'userHomePage') {
						this.$message({
							message: this.$demoi18n('view.dataSourceTypeEmpty'),
							type: 'warning',
						});
					}
				}
			},
			pre() {
				if (this.currentPage > 1) {
					this.currentPage = this.currentPage - 1
				}
			},
			next() {
				if (this.currentPage < this.totalPages) {
					this.currentPage = this.currentPage + 1
				}
			},
			change(code) {
				if (code != this.currentTab) {
					this.currentPage = 1
				}
				this.currentTab = code
			},
			// itemClick(params) {
			// 	console.log(this.widgetInstanceId)
			//   const orgEvtKey = this.orgConfig.events[0].key
			//   const outEvt = this.config.events[0]
			//   const { key } = outEvt.parameters[0] // key: 对应xminer接口中的参数/编码
			//   const { paramKey } = outEvt // paramKey: 对应数据面板中的字段名，如s，y
			//   console.log('=======params============', params)
			//   const outObj = {
			//     emit_params_obj: {
			//       eventKey: outEvt.key,
			//       type: 'terms',
			//       keys: [key],
			//       parameters: {
			//         [key]: params[paramKey],
			//       },
			//       widgetInstanceId: this.widgetInstanceId,
			//       sendTime: new Date().getTime(),
			//     },
			//   }
			//   // console.log("===================",outObj)
			//   // xvue提供的emit方法，用于发出事件的
			//   if (import.meta.env.PROD) {
			//     adapterComponent.emit(orgEvtKey, outObj)
			//   } else {
			//     emit(orgEvtKey, outObj)
			//   }
			// },
			// getTooltip() {
			//   return {
			//     config: this.config.config.property.tooltip || {},
			//     vars: {},
			//     params: this.params,
			//     parentComp: this,
			//   };
			// },
			checkNegative,
			// itemClick(params, data) {
			// 	console.log(params)
			// 	this.chartClick(params, data);
			// 	if (params) {
			// 		this.sendAdvancedLinkagge({
			// 			...params
			// 		});
			// 	}
			// },
			// handleAsTooltip(filterRes) {
			// 	const {
			// 		property
			// 	} = this.config.config;
			// 	const convertedData = convertData(filterRes, property);
			// 	this.generateChart(convertedData);
			// },
		},
	};
</script>
<style lang="less" scoped>
	// 图表通用样式，主要有黑色loading 和 黑色 ‘没有数据’，样式名需一致
	// @import '../../common/chart.less';

	.rectangle {
		width: 200px;
		/* 八边形的宽度 */
		height: 20px;
		/* 八边形的高度 */
		background: linear-gradient(180deg, #6a11cb, #2575fc);
		/* 渐变背景 */
		clip-path: polygon(3% 0%, 97% 0%, 100% 25%, 100% 75%, 97% 100%, 3% 100%, 0% 75%, 0% 25%);
		/* 定义八边形的形状 */
		margin: 20px;
		position: relative;
		/* 位置相对，以便之后添加纹理 */
		overflow: hidden;
		/* 隐藏溢出部分 */
		box-shadow: inset 0 0 30px rgba(255, 255, 255, 0.2);
		/* 中间光影 */
	}

	.grid {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-image: url('');
		background-size: 2px 2px;
		/* 纹理的大小 */
		opacity: 0.2;
		/* 设置纹理的透明度 */
	}

	.header {
		width: 100%;
		position: relative;

		.header-right {
			position: absolute;
			width: 50%;
			right: 10px;
			top: 8px;
			line-height: 36px;
			font-weight: 600;
			text-align: center;
			display: flex;
			justify-content: flex-end;

			.card-tab {
				width: 51px;
				height: 21px;
				background-image: url('./images/2.png');
				line-height: 21px;
				color: #ffffff;
				font-size: 14px;
				cursor: pointer;
			}

			.active {
				background-image: url('./images/1.png');
			}
		}
	}

	.pagination-container {
		margin: auto;
		background-image: url('./images/back.png');
		background-size: cover;
		/* 或者使用 background-size: 100% 100%; */
		background-position: center;
		/* 可选，确保图片居中 */
		background-repeat: no-repeat;
		/* 可选，确保背景图不重复 */
		position: relative;
		width: 100%;
		height: 100%;
		// width: 450px;
		// height: 260px;
	}

	.content {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		padding: 6px 6px 0px 6px;
	}

	.card {
		width: 140px;
		height: 79px;
		text-align: left;
		background-image: url('./images/item.png');
		display: flex;
		flex-direction: column;
		background-size: contain;
		/* 或者使用 background-size: 100% 100%; */
		background-position: center;
		/* 可选，确保图片居中 */
		background-repeat: no-repeat;

		/* 可选，确保背景图不重复 */
		.item-1 {
			padding-left: 10px;
			height: 39px;
			line-height: 39px;
			font-family: 'PingFang SC';
			font-weight: 500;
			color: #ffffff;
			font-size: 14px;
		}

		.item-2 {
			height: 39px;
			line-height: 39px;
			padding-left: 10px;
			font-family: 'PingFang SC';
			font-weight: 500;
			color: #7dc9ff;
			font-size: 14px;
		}
	}

	.header-card {
		font-weight: bold;
		line-height: 22px;
		text-align: center;
	}

	.content-right {
		display: flex;
		justify-content: space-between;
		font-size: 14px;

		.left {
			width: 40%;
			display: flex;
			justify-content: center;
			/* 水平居中 */
			align-items: center;
			/* 垂直居中 */
			height: 66px;
		}

		.right {
			width: 60%;
			display: flex;
			flex-direction: column;
			padding: 4px;

			.height-light {
				color: #00f2ff;
				font-weight: 600;
			}
		}
	}

	.pagination {
		display: flex;
		justify-content: left;
		padding: 0px 6px;
		width: 100%;
		margin-top: 10px;
	}

	.left {
		width: 24px;
		height: 24px;
		background-image: url('./images/left.png');
		cursor: pointer;
	}

	.right {
		width: 24px;
		height: 24px;
		margin-left: 10px;
		background-image: url('./images/right.png');
		cursor: pointer;
	}
</style>
<style>
	/* 全局loading样式修改 */

	.chartMain .loading .el-loading-spinner .circular {
		width: 34px !important;
		height: 34px !important;
	}

	.chartMain .el-dialog__header {
		padding: 9px 20px 10px !important;
		background: #2a3352 !important;
		text-align: left;
		box-sizing: border-box;
		height: 50px;
		line-height: 32px;
	}

	.chartMain .el-dialog__title {
		text-align: left;
		/* font-size: 18px; */
		line-height: 18px !important;
		color: #b2d3fe !important;
	}

	.chartMain .el-dialog__body {
		padding: 10px 20px 30px 20px;
		background: #1a2032 !important;
		line-height: 24px;
		font-size: 14px;
	}

	.chartMain .el-dialog__headerbtn .el-dialog__close {
		color: #b2d3fe !important;
	}

	.chartMain .dialog-footer {
		text-align: right;
		margin-bottom: -14px;
		margin-right: 4px;
	}

	.chartMain .el-dialog__headerbtn {
		top: 15px;
		/* font-size: 18px; */
	}
</style>